<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../bower_components/iron-image/iron-image.html">
<link rel="import" href="../../bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">


<dom-module id="forest-picker-panel">
  <template>
    <style include="iron-flex iron-flex-alignment">
      /** Variables. */
      :host {
        --thumbnail-height: 120px;
        --destination-border: 2px;
        --icon-expand-more: url('http://www.gstatic.com/images/icons/material/system/1x/expand_more_white_48dp.png');
        --icon-expand-less: url('http://www.gstatic.com/images/icons/material/system/1x/expand_less_white_48dp.png');
      }

      :host[narrow-viewport] #destinationPicker {
        height: var(--thumbnail-height);
      }

      :host[narrow-viewport] .outer-container {
        margin: 2px 1px;
      }

      :host[narrow-viewport] .inner-container,
      :host[narrow-viewport] .outer-container {
       height: calc(var(--thumbnail-height) - var(--destination-border));
      }

      :host[narrow-viewport] .outer-container.iron-selected .inner-container {
        @apply --shadow-elevation-3dp;
      }

      :host[narrow-viewport] iron-selector {
        padding-bottom: 0;
      }

      :host[narrow-viewport] iron-icon {
        color: rgba(0,0,0,.6);
      }

      :host[narrow-viewport] #destinationPickerWrapper {
        height: calc(var(--thumbnail-height) + 2px);
      }

      :host[narrow-viewport] .outer-container.iron-selected .inner-container::before {
        opacity: .38;
        content: '';
        margin: auto;
        height: 48px;
        width: 48px;
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }

      :host[narrow-viewport] .outer-container.iron-selected .inner-container::before {
        background-image: var(--icon-expand-less);
      }

      :host[narrow-viewport][expanded] .outer-container.iron-selected .inner-container::before {
        background-image: var(--icon-expand-more);
      }

      /* Wide display. */
      :host:not([narrow-viewport]) paper-tab {
        flex-grow: 0;
        padding: 0 30px;
      }

      .inner-container:hover {
        box-shadow: 0 5px 10px rgba(0,0,0,0.19), 0 3px 3px rgba(0,0,0,0.23);
      }

      .inner-container {
        transition: box-shadow 0.2s ease-in-out;
      }

      :host:not([narrow-viewport]) #selection-container {
        @apply --layout-horizontal;
      }

      :host:not([narrow-viewport]) #destinationPickerWrapper {
        height: calc(var(--thumbnail-height) + 12px);
      }

      /* Base rules. */

      paper-material {
        padding: 0;
        width: 100%;
        overflow: hidden;
      }

      iron-image,
      iron-image #sizedImgDiv {  /* Necessary when a full-size image is used as the background. */
        border-radius: var(--destination-border);
      }

      hr.divider {
        margin-bottom: 0;
      }

      #selection-container {
        @apply --layout-center;
        overflow: hidden;
      }

      paper-ripple {
        color: black;
      }

      .outer-container {
        margin: 6px 3px;
        height: var(--thumbnail-height);
        width: 110px;
        flex-shrink: 0;
        cursor: pointer;
        border-radius: var(--destination-border);
      }

      .inner-container {
        position: relative;
        width: 110px;
        height: var(--thumbnail-height);
        color: white;
        background-size: auto !important;
        box-sizing: border-box;
        box-shadow: 0 1px 3px rgba(0, 0, 0, var(--dark-divider-opacity)),
                    0 1px 2px rgba(0, 0, 0, var(--dark-disabled-opacity));
      }

      iron-image {
        height: inherit;
        width: inherit;
      }

      .destination-title {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.4);
        /* Prevent highlight of destination text. */
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none;   /* Chrome/Safari/Opera */
        -khtml-user-select: none;    /* Konqueror */
        -moz-user-select: none;      /* Firefox */
        -ms-user-select: none;       /* IE/Edge */
        user-select: none;           /* non-prefixed version; currently not used */
        box-sizing: border-box;
        text-overflow: ellipsis;
        overflow: hidden;
        border: var(--destination-border) solid transparent;
        border-radius: var(--destination-border);
      }

      #destinationPickerWrapper {
        overflow: hidden;
        width: 100%;
      }

      iron-selector {
        overflow-x: auto;
        overflow-y: hidden;
      }

      :host.loading iron-selector {
        opacity: 0.5;
      }

      :host paper-spinner {
        @apply --layout-fit;
        display: block;
        margin: auto;
      }

      hr.divider {
        margin-top: 0px;
        border-width: 0;
      }

      #destinationTabs {
        text-transform: uppercase;
        border-bottom: 1px solid var(--google-grey-300);
      }

      paper-tabs {
        --paper-tabs-selection-bar: {
          border-bottom-width: 4px;
        };
        --paper-tabs-selection-bar-color: var(--paper-teal-400);
      }

      .iron-selected .destination-title {
        border: var(--destination-border) solid white;
      }

      .scroll-button {
        width: 60px;
        position: absolute;
        z-index: 2;
        border-radius: 50%;
        background-color: rgba(255,255,255,.38);
        height: 60px;
        bottom: 31px;
      }

      .scroll-button ::content * {
        color: rgba(0,0,0,.9);
      }

      .scroll-button[pressed] {
        background-color: rgba(0,0,0,.2);
      }

      .scroll-button.left {
        left: -30px;
      }

      .scroll-button.right {
        right: -30px;
      }

      .scroll-button.left ::content iron-icon {
        margin-left: 13px;
      }

      .scroll-button.right ::content iron-icon {
        margin-left: -13px;
      }

      iron-image.country {
        background-color: var(--paper-teal-700);
      }

      iron-image.ecoregion {
        background-color: var(--paper-deep-orange-800);
      }

      iron-image.hotspot {
        background-color: var(--paper-light-green-800);
      }
    </style>
    <iron-ajax
      auto
      url="/static/destinations/index.json"
      handle-as="json"
      last-response="{{destinationsIndex_}}">
    </iron-ajax>
    <iron-ajax
      auto
      url="/static/destinations/details.json"
      handle-as="json"
      last-response="{{destinationsDetailsById_}}">
    </iron-ajax>

    <paper-material elevation="1" class="layout horizonal">
      <!-- Tabs for Destination Types -->
      <paper-tabs
          id="destinationTabs"
          selected="{{curDestinationType_}}"
          attr-for-selected="name"
          noink>
        <paper-tab name="country">Countries</paper-tab>
        <paper-tab name="ecoregion">Ecoregions</paper-tab>
        <paper-tab name="hotspot">Hotspots</paper-tab>
      </paper-tabs>

      <hr class="divider">

      <paper-spinner id="contentSpinner" class="blue flex"></paper-spinner>

      <!-- Destination Thumbnail Picker -->
      <div id="selection-container">

        <!-- Left button -->
        <paper-icon-button
            class="scroll-button left"
            icon="chevron-left"
            title="left"
            noink
            on-down="scrollLeft_">
        </paper-icon-button>

        <!-- List of destination thumbnails, wrapped to hide an ugly mobile scrollbar. -->
        <div id="destinationPickerWrapper">
          <iron-selector
              id="destinationPicker"
              class$="flex layout horizontal {{visibleDestinations_.0.type}}"
              selected="{{curDestinationId_}}"
              attr-for-selected="id">
            <template is="dom-repeat" items="{{visibleDestinations_}}">
              <div class="outer-container" id="{{item.id}}">
                <div class="inner-container">
                  <iron-image
                      aria-label="{{item.title}}"
                      src="/static/thumbnails/{{item.id}}.png"
                      sizing="initial"
                      class$="layout horizontal end {{curDestinationType_}}"
                      fade>
                  </iron-image>
                  <div class="destination-title">
                    {{item.title}}
                  </div>
                </div>
              </div>
            </template>
          </iron-selector>
        </div>

        <!-- Right button -->
        <paper-icon-button
            class="scroll-button right"
            icon="chevron-right"
            title="right"
            noink
            on-down="scrollRight_">
        </paper-icon-button>
      </div>
    </paper-material>
  </template>
  <script src="forest-picker-panel.js"></script>
</dom-module>
